<template>
  <div>
    <el-tabs v-model="tabs">
      <el-tab-pane v-if="linktype.indexOf('1') > -1" name="1" label="商城页面">
        <div class="search_div">
          <el-input placeholder="请输入内容" v-model="input2">
            <template slot="append">
              <el-button>搜索</el-button>
            </template>
          </el-input>
        </div>
        <div class="content">
          <div class="content_item">
            <p>商城页面</p>
            <ul>
              <li :class="item.id == select_data.id && select_data.type == 1 ? 'el-button--primary' : ''" v-for="(item, i) in pagelist" :key="i" @click="selectItem(item, 1)">
                <span>{{ item.name }}</span>
              </li>
            </ul>
            <p>订单页面</p>
            <ul>
              <li :class="item.id == select_data.id && select_data.type == 1 ? 'el-button--primary' : ''" v-for="(item, i) in pagelist1" :key="i" @click="selectItem(item, 1)">
                <span>{{ item.name }}</span>
              </li>
            </ul>
            <p>页面</p>
            <ul>
              <li :class="item.id == select_data.id && select_data.type == 1 ? 'el-button--primary' : ''" v-for="(item, i) in pagelist2" :key="i" @click="selectItem(item, 1)">
                <span>{{ item.name }}</span>
              </li>
            </ul>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane v-if="linktype.indexOf('2') > -1" name="2" label="商品">
        <div class="search_div">
          <el-input placeholder="请输入内容" v-model="pro.name">
            <template slot="append">
              <el-button @click="searchData">搜索</el-button>
            </template>
          </el-input>
        </div>
        <div class="content">
          <el-table :data="list">
            <el-table-column prop="name" label="商品">
              <template slot-scope="scope">
                <div class="product-item">
                  <vimage :src="scope.row.master"></vimage>

                  <span>{{ scope.row.name }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column width="150px" label="价格(原价)">
              <template slot-scope="scope">
                {{ scope.row.sell_price }}({{ scope.row.original_price }})
              </template>
            </el-table-column>
            <el-table-column width="120px" prop="total" label="库存"></el-table-column>
            <el-table-column width="120px" label="操作">
              <template slot-scope="scope">
                <el-button :type="scope.row.id == select_data.id && select_data.type == 2 ? 'primary' : ''" @click="selectItem(scope.row, 2)">
                  {{ scope.row.id == select_data.id && select_data.type == 2 ? '已选' : '选择' }}
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="table_footer">
            <el-pagination @current-change="changePage" class="pages" :page-size="10" background hide-on-single-page layout="prev, pager, next" :total="total"></el-pagination>
          </div>
        </div>
      </el-tab-pane>
      <!-- <el-tab-pane v-if="linktype.indexOf('3') > -1" name="3" label="直播间选择"></el-tab-pane> -->
      <el-tab-pane v-has="3" v-if="linktype.indexOf('4') > -1 && addons.indexOf(3) > -1" name="4" label="优惠券">
        <div class="search_div">
          <el-input placeholder="请输入内容" v-model="input2">
            <template slot="append">
              <el-button>搜索</el-button>
            </template>
          </el-input>
        </div>
        <div class="content">
          <el-table :data="couponlist">
            <el-table-column prop="name" label="优惠券名称"></el-table-column>
            <el-table-column label="优惠内容">
              <template slot-scope="scope">
                {{ scope.row.name }}
              </template>
            </el-table-column>
            <el-table-column label="发放总量">
              <template slot-scope="scope">
                {{ scope.row.total_limit_type == 0 ? '不限制' : scope.row.total_limit }}
              </template>
            </el-table-column>
            <el-table-column prop="create_time" label="创建时间"></el-table-column>
            <el-table-column width="120px" label="操作">
              <template slot-scope="scope">
                <el-button :type="scope.row.id == select_data.id && select_data.type == 4 ? 'primary' : ''" @click="selectItem(scope.row, 4)">
                  {{ scope.row.id == select_data.id && select_data.type == 4 ? '已选' : '选择' }}
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="table_footer">
            <el-pagination @current-change="changePage" class="pages" :page-size="10" background hide-on-single-page layout="prev, pager, next" :total="cou_total"></el-pagination>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane v-if="linktype.indexOf('5') > -1" name="5" label="自定义页面">
        <div class="search_div">
          <el-input placeholder="请输入内容" v-model="page_name">
            <template slot="append">
              <el-button>搜索</el-button>
            </template>
          </el-input>
        </div>
        <div class="content">
          <el-table :data="custom_list">
            <el-table-column prop="page_name" label="页面名称"></el-table-column>
            <el-table-column label="渠道">
              <template slot-scope="scope">
                <div class="sourceimg">
                  <i v-if="scope.row.source.indexOf('2') > -1" class="iconfont el-sc-weixin4"></i>
                  <i v-if="scope.row.source.indexOf('1') > -1" class="iconfont el-sc-xiaochengxu"></i>
                  <i v-if="scope.row.source.indexOf('3') > -1" class="iconfont el-sc-h5"></i>
                </div>
                <!--              <img class="sourceimg" v-if="scope.row.source.indexOf('2') > -1" src="@/assets/images/h5.png" />
                <img class="sourceimg" v-if="scope.row.source.indexOf('1') > -1" src="@/assets/images/wx_min.png" /> -->
              </template>
            </el-table-column>
            <el-table-column prop="create_time" label="创建时间"></el-table-column>
            <el-table-column width="120px" label="操作">
              <template slot-scope="scope">
                <el-button :type="scope.row.id == select_data.id && select_data.type == 5 ? 'primary' : ''" @click="selectItem(scope.row, 5)">
                  {{ scope.row.id == select_data.id && select_data.type == 5 ? '已选' : '选择' }}
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="table_footer">
            <el-pagination @current-change="changePage" class="pages" :page-size="10" background hide-on-single-page layout="prev, pager, next" :total="cou_total"></el-pagination>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane v-if="linktype.indexOf('6') > -1" name="6" label="自定义链接">
        <div class="content">
          <div class="disf">
            <div class="content_title">链接类型:</div>
            <div>
              <el-radio-group v-model="DIYRadio">
                <el-radio :label="1">网址链接</el-radio>
                <el-radio :label="3">跳转小程序</el-radio>
                <el-radio :label="2">拨打电话</el-radio>
              </el-radio-group>
            </div>
          </div>
          <el-alert v-if="DIYRadio == 3" title="提示：此功能仅支持小程序之间的跳转，不支持从其他渠道跳转小程序。" close-text="知道了" type="warning"></el-alert>
          <el-form ref="DIYLink" :model="DIYLink" :rules="DIYLinkRules" style="margin-top: 20px;" label-width="150px">
            <template v-if="DIYRadio == 3">
              <el-form-item prop="appid" label="小程序APPID:"><el-input v-model="DIYLink.appid" placeholder="请输入小程序APPID"></el-input></el-form-item>
              <el-form-item label="小程序路径:"><el-input v-model="DIYLink.pages" placeholder="请输入小程序路径"></el-input></el-form-item>
            </template>
            <template v-if="DIYRadio == 1">
              <el-form-item prop="link" label="链接地址:"><el-input v-model="DIYLink.link" placeholder="请输入链接地址"></el-input></el-form-item>
            </template>
            <template v-if="DIYRadio == 2">
              <el-form-item prop="mobile" label="电话号码:"><el-input v-model="DIYLink.mobile" placeholder="请输入电话号码"></el-input></el-form-item>
            </template>
          </el-form>
        </div>
      </el-tab-pane>
      <el-tab-pane v-if="linktype.indexOf('7') > -1" name="7" label="商品分类">
        <div class="catelist">
          <div class="header">
            <div class="cname">分类名称</div>
            <div class="cpic">分类图片</div>
            <div class="cbutton">操作</div>
          </div>
          <div class="cate_con">
            <div class="cate_sin" v-for="(item, i) in catelist" :key="i">
              <div class="cate_name">
                <div class="cname">{{ item.name }}</div>
                <div class="cpic"><vimage style="width: 40px; height: 40px;border:1px solid #E4E7ED;" :src="item.img" fit="fit"></vimage></div>
                <div class="cbutton">
                  <el-button :key="rk" :type="item.c_id == select_data.id && select_data.type == 7 ? 'primary' : ''" size="medium" @click="selectItem(item, 7)">选择</el-button>
                </div>
              </div>
              <span v-if="item.children.length > 0">
                <div class="lv_next_lv2" v-for="(item2, l) in item.children" :key="l">
                  <div class="cate_name">
                    <div class="cname">
                      <span class="bkl"></span>
                      {{ item2.name }}
                    </div>
                    <div class="cpic"><vimage style="width: 40px; height: 40px;border:1px solid #E4E7ED;" :src="item2.img" fit="fit"></vimage></div>
                    <div class="cbutton">
                      <el-button :key="rk" :type="item2.c_id == select_data.id && select_data.type == 7 ? 'primary' : ''" size="medium" @click="selectItem(item2, 7)">选择</el-button>
                    </div>
                  </div>
                  <span v-if="item2.children.length > 0">
                    <div class="lv_next_lv3" v-for="(item3, k) in item2.children" :key="k">
                      <div class="cate_name">
                        <div class="cname">
                          <span class="bkl"></span>
                          {{ item3.name }}
                        </div>
                        <div class="cpic"><vimage style="width: 40px; height: 40px;border:1px solid #E4E7ED;" :src="item3.img" fit="fit"></vimage></div>
                        <div class="cbutton">
                          <el-button :key="rk" :type="item3.c_id == select_data.id && select_data.type == 7 ? 'primary' : ''" size="medium" @click="selectItem(item3, 7)">
                            选择
                          </el-button>
                        </div>
                      </div>
                    </div>
                  </span>
                </div>
              </span>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="微信客服" v-if="linktype.indexOf('8') > -1 && addons.indexOf(22) > -1" name="8">
        <el-form>
          <el-form-item label="选择客服">
            <el-button size="small" v-if="selectMer.length == 0" @click="showSelect = true">点击选择</el-button>
            <el-button size="small" v-if="selectMer.length > 0" @click="showSelect = true">{{ selectMer[0].name }}</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
    <div class="dialog-footer">
      <el-button @click="outData('close')">取消</el-button>

      <el-button type="primary" v-if="tabs == 6" @click="editlink">确定</el-button>
      <el-button type="primary" v-else @click="outData">确定</el-button>
    </div>
    <el-dialog title="选择客服" :visible.sync="showSelect" width="50%" append-to-body><SelectCustomer :key="rk" :data="selectMer" @outData="closePro"></SelectCustomer></el-dialog>
  </div>
</template>

<script>
import {getProList, getCateList} from '@/api/shop/dndlist';
import {pageList} from '@/api/mall/dndlist';
import {getCouponList} from '@/api/shop/marketing';
import {getSiteConfig} from '@/api/mall/setting';
import {mapGetters} from 'vuex';
import SelectCustomer from '@/components/SelectCustomer/index';
export default {
  props: {
    linkdata: {
      type: Object,
      default: function() {
        return {};
      }
    },
    linktype: {
      type: Array,
      default: function() {
        return ['1', '2', '3', '4', '5', '6', '7', '8'];
      }
    }
  },
  data() {
    const validateMobile = (rule, value, callback) => {
      if (!/^1[23456789]\d{9}$/.test(value)) {
        callback(new Error('手机号码有误，请重填'));
      } else {
        callback();
      }
    };
    return {
      showSelect: false,

      selectMer: [],
      limit: 1,
      input2: '',
      list: [],
      tabs: '1',
      //outlist:[],
      page: 1,
      size: 10,
      total: 0,
      rk: 1,
      select_data: {},
      pro: {status: 1},
      //分类列表
      catelist: [],
      //优惠券
      cou_page: 1,
      cou_total: 0,
      couponlist: [],
      //自定义链接
      DIYLink: {
        appid: '',
        mobile: '',
        link: '',
        pages: ''
      },
      DIYRadio: 1,
      DIYLinkRules: {
        appid: [
          {
            required: true,
            trigger: 'blur',
            message: '请输入appid'
          }
        ],
        link: [
          {
            required: true,
            trigger: 'blur',
            message: '请输入链接地址'
          }
        ],
        mobile: [
          {
            required: true,
            trigger: 'blur',
            validator: validateMobile
          }
        ]
      },
      //自定义页面
      page_name: '',
      custom_list: [],
      custom_page: 1,
      custom_total: 0,

      pagelist: [
        {
          link: '../index/index',
          name: '商城首页',
          id: 1,
          login_type: 1
        },
        {
          link: '../mine/mine',
          name: '个人中心',
          id: 2,
          login_type: 1
        },
        {
          link: '../categoryList/categoryList',
          name: '分类列表',
          id: 3,
          login_type: 1
        },
        {
          link: '../list/list',
          name: '商品列表',
          id: 4,
          login_type: 1
        },
        {
          link: '../cart/cart',
          name: '购物车',
          id: 5,
          login_type: 2
        }
      ],
      pagelist1: [
        {
          link: '../order/list',
          name: '订单列表',
          id: 6,
          login_type: 2
        },
        {
          link: '../order/list?tab=1',
          name: '未付款订单',
          id: 7,
          login_type: 2
        },
        {
          link: '../order/list?tab=2',
          name: '待发货订单',
          id: 8,
          login_type: 2
        },
        {
          link: '../order/list?tab=3',
          name: '待收货订单',
          id: 9,
          login_type: 2
        },
        {
          link: '../order/list?tab=5',
          name: '待评价订单',
          id: 10,
          login_type: 2
        },
        {
          link: '../order/afterorder',
          name: '售后订单',
          id: 32,
          login_type: 2
        }
      ],
      pagelist2: [
        {
          link: '../mine/address/index',
          name: '地址列表',
          id: 11,
          login_type: 2,
          a_id: -1
        },
        {
          link: '../article/article',
          name: '文章列表',
          id: 12,
          login_type: 1,
          a_id: 2
        },
        {
          link: '../agent/index',
          name: '分销中心',
          id: 13,
          login_type: 2,
          d_key: 'agentExplain',
          a_id: -1
        },
        {
          link: '../merchant/index',
          name: '商家入驻',
          id: 14,
          login_type: 2,
          a_id: 12
        },
        {
          link: '../conpon/conpon?type=1',
          name: '我的优惠券',
          id: 15,
          login_type: 2,
          a_id: 3
        },
        {
          link: '../conpon/conpon?type=0',
          name: '领券中心',
          id: 16,
          login_type: 2,
          a_id: 3
        },
        {
          link: '../mine/integral/integral',
          name: '积分明细',
          id: 17,
          login_type: 2,
          d_key: 'integralBalance',
          a_id: 7
        },
        {
          link: '../recharge/recharge',
          name: '充值中心',
          id: 18,
          login_type: 2,
          a_id: -1
        },
        {
          link: '../mine/collect/collect',
          name: '我的收藏',
          id: 19,
          login_type: 2,
          a_id: -1
        },
        {
          link: '../mine/balance/balance',
          name: '余额明细',
          id: 20,
          login_type: 2,
          a_id: -1
        },
        {
          link: '../mine/balance/withdraw',
          name: '余额提现',
          id: 21,
          login_type: 2,
          a_id: -1
        },
        // {
        //   link: '../customer/customer',
        //   name: '客服消息',
        //   id: 22,
        //   login_type: 1,
        //   a_id: -1
        // },
        {
          link: '../contactus/contactus',
          name: '联系我们',
          id: 23,
          login_type: 1,
          a_id: -1
        },
        // {
        //   link: '../merchant/index',
        //   name: '店铺主页',
        //   id: 24,
        //   login_type: 1
        // },
        {
          link: '../customer/customer',
          name: '腾讯智服',
          id: 25,
          login_type: 1,
          a_id: 9
          // d_key:"customerService"
        },
        {
          link: '../wxqcode/wxqcode',
          name: '客服二维码',
          id: 27,
          login_type: 1,
          a_id: -1
          // d_key:"customerService"
        },
        {
          link: '../marketing/signin',
          name: '签到',
          id: 26,
          login_type: 2,
          d_key: 'signIn',
          a_id: 5
        },
        {
          link: '../prize/index?id=1',
          name: '九宫格',
          id: 28,
          login_type: 2,
          a_id: 17
        },
        {
          link: '../prize/index?id=2',
          name: '刮刮乐',
          id: 29,
          login_type: 2,
          a_id: 18
        },
        {
          link: '../user/index',
          name: '会员中心',
          id: 30,
          login_type: 2,
          a_id: 19
        },
        {
          link: '../mine/invoice/myinvoice',
          name: '我的发票',
          id: 31,
          login_type: 2,
          a_id: -1
        },
        {
          link: '/pointsmallpage/goods/goods',
          name: '积分商城',
          id: 33,
          login_type: 2,
          a_id:19
        },
      ],
      config: {
        integralBalance: 'is_open',
        agentExplain: 'open',
        signIn: 'signIn'
        // customerService:""
      },
      obj: {
        integralBalance: 1,
        agentExplain: 0,
        signIn: 0
      },
      DIYLinkname: ['链接地址', '拨打电话', '小程序']
    };
  },
  computed: {
    ...mapGetters(['addons'])
  },
  // watch: {
  //   linkdata() {
  //     this.select_data = Object.assign({}, this.linkdata.linkdata);
  //     this.tabs = this.select_data.type;
  //   }
  // },

  components: {
    SelectCustomer
  },
  created() {
    this.tabs = this.linktype[0];
  },
  methods: {
    init(linkdata) {
      if (this.linktype.indexOf('1') > -1) {
        this.buildlist();
      }

      if (this.linktype.indexOf('2') > -1) {
        this.searchData();
      }
      if (this.linktype.indexOf('4') > -1 && this.addons && this.addons.indexOf(3) > -1) {
        this.getCouponList();
      }
      if (this.linktype.indexOf('5') > -1) {
        this.pageList();
      }
      if (this.linktype.indexOf('7') > -1) {
        this.getList();
      }

      if (linkdata) {
        console.log(linkdata);

        this.select_data = Object.assign({}, linkdata.linkdata);
        if (this.select_data.type) {
          this.tabs = this.select_data.type + '';
        } else {
          this.tabs = this.linktype[0];
        }

        if (this.select_data && this.select_data && this.select_data.type == 6) {
          this.DIYLink = this.select_data.link;
          this.DIYRadio = this.select_data.id;
          this.tabs = '6';
        }
      } else {
        this.tabs = this.linktype[0];
      }
    },
    editlink() {
      var _this = this;
      this.$refs.DIYLink.validate(valid => {
        if (valid) {
          _this.outData();
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    async buildlist() {
      let _this = this;
      let list = this.pagelist2.filter(async a => {
        if (a.d_key) {
          await this.getConfig(a.d_key);
          return _this.obj[a.d_key];
        } else {
          return true;
        }
      });
      this.pagelist2 = list.filter(a => {
        return a.a_id == -1 || (a.a_id != -1 && _this.addons.indexOf(a.a_id) > -1);
      });
      console.log(this.pagelist2);
    },
    async getConfig(type) {
      this.isLoading = true;
      getSiteConfig(type)
        .then(async res => {
          if (res.msg) {
            let configuration = res.msg.configuration;
            let key = this.config[type];
            this.obj[type] = configuration[key];
          } else {
            this.obj[type] = 0;
          }
        })
        .catch(e => {});
    },
    outData(type) {
      if (type == 'close') {
        this.$emit('closepup');
      } else {
        if (this.tabs == '6') {
          let data = {
            link: this.DIYLink,
            type: 6,
            id: this.DIYRadio,
            name: this.DIYLinkname[this.DIYRadio - 1],
            login_type: 1
          };
          console.log(data);
          this.DIYLink = {
            appid: '',
            mobile: '',
            link: '',
            pages: ''
          };
          this.DIYRadio = 1;
          this.$emit('changelink', data);
        } else {
          console.log(this.select_data);
          this.$emit('changelink', this.select_data);
        }
      }
    },
    //搜索数据
    searchData() {
      this.proTemp = Object.assign({}, this.pro);
      this.getData();
    },

    //选择单条记录
    selectItem(item, type) {
      console.log(item);
      if (item.id == this.select_data.id) {
        if (type != 8) {
          this.select_data = {};
        }
      } else {
        if (type == 2) {
          item.link = '../detail/detail?id=' + item.id;
        } else if (type == 4) {
          item.link = '../conpon/conpon?id=' + item.id;
        } else if (type == 6) {
          item.link = '../list/list?id=' + item.id;
        } else if (type == 5) {
          item.link = '../custompage/custompage?id=' + item.id;
          item.name = item.page_name;
        } else if (type == 7) {
          item.id = item.c_id;
        } else if (type == 8) {
          item.link = item.url;
          item.name = '微信客服:' + item.name;
        }
        this.select_data = {
          link: item.link,
          type: type,
          id: item.id,
          name: item.name,
          login_type: item.login_type ? item.login_type : 1
        };
        console.log(this.select_data);
        if (type == 8) {
          this.select_data.company_id = item.company_id;
          this.select_data.corp_id = item.corp_id;
        }
      }
    },
    //
    //切换分页
    changePage(page) {
      console.log(this.tabs);
      let type = this.tabs;
      switch (type) {
        case '2':
          this.page = page;
          this.getData();
          break;
        case '4':
          this.cou_page = page;
          this.getCouponList();
          break;
        case '5':
          this.custom_page = page;
          this.pageList();
          break;
      }
    },
    //搜索商品列表
    getData() {
      this.isLoading = true;
      getProList(this.proTemp, this.page, this.size).then(res => {
        this.isLoading = false;
        this.list = res.msg.data;
        //筛选哪些数据是传入的已选择数据
        // this.list.forEach(e => {
        //   if(this.data.findIndex(_ => _.id == e.id) > -1){
        //     e.checked = true;
        //   };
        // });
        this.total = res.msg.total;
      });
    },
    //获取全部分类数据
    getList() {
      this.isLoading = true;
      getCateList().then(res => {
        let list = res.msg.data;
        for (let i = 0, l = list.length; i < l; i++) {
          list[i].c_id = list[i].id;
          if (list[i].id == this.select_data.id) {
            list[i].checked = true;
          }
          //循环二级
          if (list[i].children.length > 0) {
            for (let a = 0, b = list[i].children.length; a < b; a++) {
              list[i].children[a].c_id = list[i].id + '->' + list[i].children[a].id;

              if (list[i].children[a].id == this.select_data.id) {
                list[i].children[a].checked = true;
            
              }
              //循环三级
              if (list[i].children[a].children.length > 0) {
                for (let x = 0, y = list[i].children[a].children.length; x < y; x++) {
                  list[i].children[a].children[x].c_id = list[i].id + '->' + list[i].children[a].id + '->' + list[i].children[a].children[x].id;

                  if (list[i].children[a].children[x].id == this.select_data.id) {
                    list[i].children[a].children[x].checked = true;
                   
                  }
                }
              }
            }
          }
        }
        console.log(list);
        this.catelist = list;
        // this.cate_total=res.msg.total;
      });
    },
    //获取优惠券
    getCouponList() {
      let params = {};
      getCouponList(params, this.cou_page, 10).then(res => {
        this.couponlist = res.msg.data;
        this.cou_total = res.msg.total;
      });
    },
    //获取自定义页面
    pageList() {
      let params = {
        page: this.custom_page,
        size: 10,
        status: 2,
        page_type: 4
      };
      pageList(params, this.custom_page, 10).then(res => {
        this.custom_list = res.msg.data;
        this.custom_total = res.msg.total;
      });
    },
    closePro(list) {
      console.log(list);
      this.showSelect = false;
      this.selectItem(list[0], 8);
    }
  }
};
</script>

<style lang="scss" scoped>
.search_div {
  width: 250px;
  margin-bottom: 20px;
}
.product-item {
  display: flex;
  align-items: center;

  img {
    width: 40px;
    height: 40px;
    margin-right: 10px;
  }
}
.table_footer {
  margin-bottom: 15px;
}
.sourceimg {
  .iconfont {
    font-size: 24px;
    color: #333333;
    margin-left: 10px;
  }
}
.content {
  .content_item {
    p {
      margin: 0;
      font-size: 14px;
      font-weight: bold;
      line-height: 20px;
      color: #262b30;
      padding-bottom: 20px;
    }
    ul {
      flex-wrap: wrap;
      display: flex;
      li {
        border: 1px solid #e9edef;
        border-radius: 2px;
        padding: 10px 0px;
        margin: 0 16px 16px 0;

        font-size: 14px;
        font-weight: normal;
        line-height: 20px;
        cursor: pointer;
        width: 120px;
        text-align: center;
        // padding-right: 5px;
        &.checked {
          background-color: #2d8cf0;
          color: #ffffff;
          border-color: #2d8cf0;
        }
      }
    }
  }
  .disf {
    display: flex;
    padding: 20px;
    align-items: center;
  }
  .content_title {
    margin-right: 20px;
    font-size: 16px;
  }
}
.dialog-footer {
  padding: 15px 0;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid #e6ebf5;
}
.catelist {
  width: 100%;

  .header {
    width: 100%;
    height: 40px;
    line-height: 40px;
    display: flex;
    font-weight: 700;

    .cname {
      flex: 1;
      padding-left: 10px;
    }

    .cpic {
      width: 150px;
      display: flex;
      justify-content: center;
    }

    .cbutton {
      width: 120px;
    }
  }

  .cate_con {
    max-height: 500px;
    overflow-y: auto;
    padding-bottom: 10px;

    .cate_sin {
      width: 100%;
      margin-top: 10px;
      border: 1px solid #dcdfe6;

      .cate_name {
        width: 100%;
        height: 60px;
        line-height: 60px;
        display: flex;
        background-color: #f4f6f8;

        .cname {
          flex: 1;
          padding-left: 10px;
          // display: flex;
          // align-items: center;

          .bkl {
            display: inline-block;
            border-left: 1px solid #dcdfe6;
            border-bottom: 1px solid #dcdfe6;
            width: 20px;
            height: 20px;
            margin: 0 30px 3px 20px;
          }
        }

        .cpic {
          width: 150px;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .cbutton {
          width: 120px;
        }
      }

      .lv_next_lv2 {
        .cate_name {
          background: #fafdff;
          border-top: 1px solid #dcdfe6;
        }

        .lv_next_lv3 {
          .cate_name {
            background: #fffdf9;
            border-top: 1px solid #dcdfe6;

            .cname {
              .bkl {
                margin-left: 80px;
              }
            }
          }
        }
      }
    }
  }
}
</style>
